Day 12 - 建立個人資料頁面 & Django ORM - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 12

自我挑戰組

轉職新手學 Django 及 DRF系列第 12 篇

Day 12 - 建立個人資料頁面 & Django ORM

15th鐵人賽轉職 python django django-rest-framework

kk00915

2023-09-27 00:39:19

412 瀏覽

分享至

今天來繼續完成其他的頁面。

記得啟動虛擬環境

創建 profile view

在創建畫面之前我們來建立相對應的 view，因為只打算顯示登入使用者的資料，所以需要使用 Django ORM 來拿取資料。

Django ORM

ORM 全名為 Object Relational Mapping，中文為物件關聯對映，是一種可以用程式語言來執行 SQL 資料庫語法的方法，很多程式語言都具有此技術，在 Django 中可以使用 Python 語法來操作資料庫，可以增加生產力，也可以防止常見的 SQL injection。不過有好必有壞，ORM 學習曲線高、效能較差、複雜查詢時較麻煩。

OK 回到 view。到 core/views.py 新增 profile 函式：

from django.shortcuts import render, redirect, get_object_or_404
# 其他程式碼
def profile(request, pk):
    user = get_object_or_404(get_user_model(), pk=pk)

    return render(request, 'core/profile.html', {
        'user': user
    })

這邊 pk 是 primary key 的縮寫，為一筆資料中獨特的部分，Django 預設的 pk 為 id，拿取後在 render 中加入 context {'user': user}，context 可將拿取過的資料渲染在模板中，很常用。另外也要修改login_view以及signup中的HTTPResponse：

        # signup 的其他程式碼
        user = authenticate(request, username=username, password=password)
        login(request, user)

        return redirect('core:profile', pk=user.pk)

        # login_view 的其他程式碼
        if user is not None:
            login(request, user)
            return redirect('core:profile', pk=user.pk)

接著到 core/urls.py 增加對應的 path

urlpatterns = [
    # 其他程式碼
    path('profile/<int:pk>', views.profile, name='profile'),
]

建立 profile 頁面

到 core/templates/core 創建profile.html檔案，這個頁面會在畫面中央顯示使用者的基本資訊，以及修改資料及登出按鈕。在profile.html中加入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Profile</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
    <div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-md">
        <h1 class="text-2xl font-semibold mb-4">Your Profile</h1>
        <table class="table-auto w-full">
            <tbody>
                <tr>
                    <td class="border px-4 py-2">Name:</td>
                    <td class="border px-4 py-2">{{ user.name }}</td>
                </tr>
                <tr>
                    <td class="border px-4 py-2">Email:</td>
                    <td class="border px-4 py-2">{{ user.email }}</td>
                </tr>
            </tbody>
        </table>
        <div class="mt-4">
            <a href="#" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Modify</a>
            <a href="#" class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 ml-2">Logout</a>
        </div>
    </div>
</body>
</html>

這邊使用了兩個大引號{{}}包住變數名，此種模板標籤可用來呈現資料，而資料是從 view 的 context 傳過來的。那麼註冊後及登入後的畫面就完成。